// 引入 Next.js 的 Link 组件，用于页面跳转
import Link from 'next/link';
// 引入自定义的获取文章数据的方法
import { getSortedPostsData } from '../lib/posts';

// 首页组件，渲染博客文章列表
export default async function HomePage() {
  // 获取所有已排序的文章数据（服务端执行）
  const posts = await getSortedPostsData();
  // 服务端调试输出
  console.log('【服务端调试】posts:', posts);

  return (
    // 外层容器，设置内边距
    <div className="p-4">
      {/* 页面调试输出，直接显示 posts 的 JSON 内容 */}
      <pre className="bg-gray-100 text-xs p-2 mb-4 border rounded">{JSON.stringify(posts, null, 2)}</pre>
      {/* 博客标题 */}
      <h1 className="text-2xl font-bold mb-4">我的博客</h1>
      {/* 文章列表 */}
      <ul>
        {posts.map((post) => (
          // 遍历每篇文章，渲染为列表项
          <li key={post.slug} className="mb-2">
            {/* 跳转到文章详情页的链接 */}
            <Link href={`/blog/${post.slug}`}>
              <span className="text-blue-600 hover:underline">{post.title}</span>
            </Link>
            {/* 显示文章日期 */}
            <span className="text-gray-500 ml-2">{post.date}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
